<!DOCTYPE html>
<html>
<!-- removed for now, causes problems in Firefox: manifest="svg-editor.manifest" -->
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>




<link href="jquery/jquery-ui.min.css" rel="stylesheet">
<script src="jquery/jquery3.min.js"></script>
<script src="jquery/jquery-ui.min.js"></script>

</head>

<body style="padding:0;margin:0;">

    <div style="position:static;left:10px;top:20px;width:100px;height:50px;background-color:lightblue;">
      i am ok
    </div>

	<div id="mdiv">
		<div>
			<canvas id="mcanvas" width="600" height="400" style="border: 1px solid black;position:fixed;left:10px;top:300px;background-color:lightgreen;"></canvas>
		</div>
	</div>

  <div id="sdiv" style="margin-top:0;width:600px;height:300px;background-color:lightblue;">
  
    <div id="indiv1" style="position:absolute;left:30px;top:20px;
    width:200px;height:100px;background-color:pink;">
      
        ab(10,20)
        
        <div style="position:absolute;left:10px;top:10px;width:100px;height:50px;background-color:yellow;">
    </div>
    
    
    </div>
    
    <div style="position:static;left:10px;top:20px;width:100px;height:50px;background-color:red;">
    </div>
    <div style="position:relative;left:30px;top:40px;width:100px;height:50px;background-color:green;">
    </div>
    <div style="position:static;left:10px;top:20px;width:100px;height:50px;background-color:blue;">
    </div>
    
  </div>


</body>

</html>

<script>

var gcanvas = document.getElementById('mcanvas');
var gctx = gcanvas.getContext('2d');
    
gctx.clearRect(0, 0, 200, 200); // 擦除(0,0)位置大小为200x200的矩形，擦除的意思是把该区域变为透明
gctx.fillStyle = '#dddddd'; // 设置颜色
gctx.fillRect(10, 10, 130, 130); // 把(10,10)位置大小为130x130的矩形涂色
// 利用Path绘制复杂路径:
var path=new Path2D();
path.arc(75, 75, 50, 0, Math.PI*2, true);
path.moveTo(110,75);
path.arc(75, 75, 35, 0, Math.PI, false);
path.moveTo(65, 65);
path.arc(60, 65, 5, 0, Math.PI*2, true);
path.moveTo(95, 65);
path.arc(90, 65, 5, 0, Math.PI*2, true);
gctx.strokeStyle = '#0000ff';
gctx.stroke(path);

</script>